<template>
  <div class="lan-share-page">
    <div class="main-layout" :class="{ 'with-preview': selectedFile }">
      <!-- Left Panel - Main Content -->
      <div class="left-panel">
        <div class="container">
          <!-- Header Section -->
          <HeaderSection @back="router.back()" />

          <!-- Upload Section -->
          <FileUploadSection 
            @upload-success="handleUploadSuccess"
            @upload-error="handleUploadError"
          />

          <!-- Files List -->
          <FileListSection 
            :files="files"
            :loading="loading"
            @refresh="refreshFileList"
            @download-success="handleDownloadSuccess"
            @download-error="handleDownloadError"
            @delete-success="handleDeleteSuccess"
            @delete-error="handleDeleteError"
            @preview-file="handlePreviewFile"
          />

          <!-- Toast notifications -->
          <ToastNotification 
            :show="toast.show"
            :message="toast.message"
            :type="toast.type"
          />
        </div>
      </div>

      <!-- Right Panel - File Preview -->
      <div v-if="selectedFile" class="right-panel">
        <FilePreviewPanel 
          :file="selectedFile"
          @close="handleClosePreview"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HeaderSection from "./components/HeaderSection.vue";
import FileUploadSection from "./components/FileUploadSection.vue";
import FileListSection from "./components/FileListSection.vue";
import ToastNotification from "./components/ToastNotification.vue";
import FilePreviewPanel from "./components/FilePreviewPanel.vue";

const router = useRouter();

// Reactive data
const files = ref([]);
const loading = ref(false);
const selectedFile = ref(null);
const toast = ref({
  show: false,
  message: "",
  type: "success",
});

// Show toast notification
const showToast = (message, type = "success") => {
  toast.value = { show: true, message, type };
  setTimeout(() => {
    toast.value.show = false;
  }, 3000);
};

// Handle upload success
const handleUploadSuccess = (message) => {
  showToast(message);
  refreshFileList();
};

// Handle upload error
const handleUploadError = (message) => {
  showToast(message, "error");
};

// Handle download success
const handleDownloadSuccess = (message) => {
  showToast(message);
};

// Handle download error
const handleDownloadError = (message) => {
  showToast(message, "error");
};

// Handle delete success
const handleDeleteSuccess = (message) => {
  showToast(message);
  refreshFileList();
};

// Handle delete error
const handleDeleteError = (message) => {
  showToast(message, "error");
};

// Handle file preview
const handlePreviewFile = (file) => {
  selectedFile.value = file;
};

// Handle close preview
const handleClosePreview = () => {
  selectedFile.value = null;
};

// Get file list
const refreshFileList = async () => {
  loading.value = true;
  try {
    const response = await $fetch("/api/lan-share", {
      method: "GET",
    });
    files.value = response.files || [];
  } catch (error) {
    console.error("Failed to load files:", error);
    showToast("获取文件列表失败", "error");
    files.value = [];
  } finally {
    loading.value = false;
  }
};

// Initialize
onMounted(() => {
  refreshFileList();
});
</script>

<style scoped>
.lan-share-page {
  min-height: 100vh;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", sans-serif;
}

.main-layout {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  transition: all 0.4s ease;
}

.main-layout.with-preview {
  /* 左侧面板占据剩余空间，右侧面板固定宽度 */
}

.left-panel {
  width: calc(100% - 800px);
  min-width: 0;
  transition: all 0.4s ease;
}

.main-layout.with-preview .left-panel {
  transition: all 0.3s ease;
  max-width: calc(100% - 500px);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background: white;
  min-height: 100vh;
}

.right-panel {
  width: 800px;
  background: #f8f9fa;
  padding: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  position: relative;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-layout {
    flex-direction: column;
  }
  
  .main-layout.with-preview .left-panel {
    max-width: 100%;
  }
  
  .right-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    height: 600px;
  }
}
</style>
